<template>
  <div class="test">
    <h1>学习scss语法</h1>
    <span>1.scss自定义变量使用$</span>
    <span>2.scss嵌套</span>
    <h2>2.&表示父级标签</h2>
    <h2>3.使用@mixin声明代码块</h2>
    <h2>4.使用@include 代码块名称 来使用代码块</h2>
    <div class="box" />
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
// 全局变量
$bg-color: red;

// 使用 @mixin 声明代码块
@mixin box {
  width: 200px;
  height: 200px;
  border: 1px solid pink;
  background-color: blue;
}

.test {
  h1 {
    background-color: $bg-color;
    width: 300px;
  }
  span {
    color: pink;
  }
  h2 {
    &:hover {
      // 局部变量
      $item-bgc: black;
      color: green;
      background-color: $item-bgc;
    }
  }
  .box {
    // include 来使用代码块
    @include box;
  }
}
</style>
